<template>
	<div class="row">
		<div v-for="column in list" :key="column.id" class="col-4 mb-4">
			<div class="card h-100 shadow-sm">
				<div class="card-body text-center">
					<img class="w-25 my-3" :src="column.avatar" alt="" />
					<h5 class="card-title">{{ column.title }}</h5>
					<p class="card-text">{{ column.description }}</p>
					<a href="#">进入专栏</a>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';

export interface ColumnListProps {
	id: number;
	title: string;
	avatar: string;
	description: string;
}
export default defineComponent({
	name: 'ColumnList',
	props: {
		list: {
			// 如果要把构造函数断言为一个类型，需要借助 PropType
			type: Array as PropType<Array<ColumnListProps>>,
			required: true,
		},
	},
	setup() {
		return {};
	},
});
</script>

<style scoped></style>
